﻿<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">表单元素 <kbd class="pull-right">Form Elements</kbd></h1>
</div>
<div class="wrapper-md" ng-controller="FormDemoCtrl">
  <div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">基础表单</div>
        <div class="panel-body">
          <form role="form">
            <div class="form-group">
              <label>电子邮箱</label>
              <input type="email" class="form-control" placeholder="请输入电子邮箱">
            </div>
            <div class="form-group">
              <label>密码</label>
              <input type="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="checkbox">
              <label class="i-checks">
                <input type="checkbox" checked disabled><i></i> 记住我
              </label>
            </div>
            <button type="submit" class="btn btn-sm btn-primary">登陆</button>
          </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">水平布局的表单</div>
        <div class="panel-body">
          <form class="bs-example form-horizontal">
            <div class="form-group">
              <label class="col-lg-2 control-label">电子邮箱</label>
              <div class="col-lg-10">
                <input type="email" class="form-control" placeholder="请输入电子邮箱">
                <span class="help-block m-b-none">格式示例： somename@host.com</span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-2 control-label">密码</label>
              <div class="col-lg-10">
                <input type="password" class="form-control" placeholder="请输入密码">
              </div>
            </div>
            <div class="form-group">
              <div class="col-lg-offset-2 col-lg-10">
                <div class="checkbox">
                  <label class="i-checks">
                    <input type="checkbox" checked><i></i> 记住我
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-lg-offset-2 col-lg-10">
                <button type="submit" class="btn btn-sm btn-info">立即登陆</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading font-bold">                  
      内联布局的表单
    </div>
    <div class="panel-body">
      <form class="form-inline" role="form">
        <div class="form-group">
          <label class="sr-only" for="exampleInputEmail2">电子邮箱</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
          <label class="sr-only" for="exampleInputPassword2">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入密码">
        </div>
        <div class="checkbox m-l m-r-xs">
          <label class="i-checks">
            <input type="checkbox"><i></i> 记住我
          </label>
        </div>
        <button type="submit" class="btn btn-default">登陆</button>
        <span ng-controller="ModalDemoCtrl">
          <script type="text/ng-template" id="myModalContent.html">
            <div ng-include="'tpl/modal.form.html'"></div>
          </script>
          <button class="btn btn-success" ng-click="open('lg')">在弹框中显示表单</button>
        </span>
      </form>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading font-bold">
      表单元素
    </div>
    <div class="panel-body">
      <form class="form-horizontal" method="get">
        <div class="form-group">
          <label class="col-sm-2 control-label">圆角</label>
          <div class="col-sm-10">
            <input type="text" class="form-control rounded">                        
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">显示帮助文本</label>
          <div class="col-sm-10">
            <input type="text" class="form-control">
            <span class="help-block m-b-none">我是一个帮助文本，有我了的帮助，你就可以上天了。</span>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-id-1">标签焦点辅助</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input-id-1">
              <span class="help-block m-b-none">点击标签也能使文本框获得焦点</span>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">密码框</label>
          <div class="col-sm-10">
            <input type="password" name="password" class="form-control">
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">提示文本</label>
          <div class="col-sm-10">
            <input type="text"  class="form-control" placeholder="这是一个提示文本">
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-lg-2 control-label">禁用</label>
          <div class="col-lg-10">
            <input class="form-control" type="text" placeholder="看不到提示文本" disabled>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-lg-2 control-label">静态文本</label>
          <div class="col-lg-10">
            <p class="form-control-static">这是一段静态文本</p>
          </div>
        </div>                    
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">单选或复选框</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="iLikeYou" >
                我是一个雌性复选框，请问你喜欢我吗？ <span ng-show="iLikeYou" class="text-danger">畜生，连复选框都不放过</span>
              </label>
            </div>

            <div class="radio">
              <label>
                  <input type="radio" ng-model="iLikeYou" ng-value="true" checked>
                喜欢
              </label>
            </div>
            <div class="radio">
              <label>
                  <input type="radio" ng-model="iLikeYou" ng-value="false">
                不喜欢，我喜欢雄性的
              </label>
            </div>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">内联复选框组</label>
          <div class="col-sm-10">
            <label class="checkbox-inline">
              <input type="checkbox" value="option1"> 吃饭
            </label>
            <label class="checkbox-inline">
              <input type="checkbox" value="option2"> 睡觉
            </label>
            <label class="checkbox-inline">
              <input type="checkbox" value="option3"> 打代码
            </label>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">CSS3 样式化<br />单选框 & 复选框</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label class="i-checks">
                <input type="checkbox" value="">
                <i></i>
                一个复选框
              </label>
            </div>
            <div class="checkbox">
              <label class="i-checks">
                <input type="checkbox" checked value="">
                <i></i>
                一个默认被勾选的复选框
              </label>
            </div>
            <div class="checkbox">
              <label class="i-checks">
                <input type="checkbox" checked disabled value="">
                <i></i>
                一个默认被勾选的禁用复选框
              </label>
            </div>
            <div class="checkbox">
              <label class="i-checks">
                <input type="checkbox" disabled value="">
                <i></i>
                一个被禁用的复选框
              </label>
            </div>
            <div class="radio">
              <label class="i-checks">
                <input type="radio" name="a" value="option1">
                <i></i>
                一个单选框
              </label>
            </div>
            <div class="radio">
              <label class="i-checks">
                <input type="radio" name="a" value="option2" checked>
                <i></i>
                一个被选中的单选框
              </label>
            </div>
            <div class="radio">
              <label class="i-checks">
                <input type="radio" value="option2" checked disabled>
                <i></i>
                一个被选中的禁用单选框
              </label>
            </div>
            <div class="radio">
              <label class="i-checks">
                <input type="radio" name="a" disabled>
                <i></i>
                一个被禁用的复选框
              </label>
            </div>

            <div class="radio">
              <label class="i-checks i-checks-sm">
                <input type="radio" name="a">
                <i></i>
                小尺寸单选框
              </label>
            </div>
            <div class="checkbox">
              <label class="i-checks i-checks-sm">
                <input type="checkbox">
                <i></i>
                小尺寸复选框
              </label>
            </div>
            <div class="m-b-xs m-t">
              <label class="i-checks i-checks-lg">
                <input type="radio" name="a">
                <i></i>
                大尺寸单选框
              </label>
            </div>
            <div class="checkbox">
              <label class="i-checks i-checks-lg">
                <input type="checkbox">
                <i></i>
                大尺寸复选框
              </label>
            </div>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">内联复选框组</label>
          <div class="col-sm-10">
            <label class="checkbox-inline i-checks">
              <input type="checkbox" value="option1"><i></i> 吃饭
            </label>
            <label class="checkbox-inline i-checks">
              <input type="checkbox" value="option2"><i></i> 睡觉
            </label>
            <label class="checkbox-inline i-checks">
              <input type="checkbox" value="option3"><i></i> 打代码
            </label>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">开关</label>
          <div class="col-sm-10">
            <label class="i-switch m-t-xs m-r">
              <input type="checkbox" checked>
              <i></i>
            </label>
            <label class="i-switch bg-info m-t-xs m-r">
              <input type="checkbox" checked>
              <i></i>
            </label>
            <label class="i-switch bg-primary m-t-xs m-r">
              <input type="checkbox" checked>
              <i></i>
            </label>
            <label class="i-switch bg-danger m-t-xs m-r">
              <input type="checkbox" checked>
              <i></i>
            </label>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">单选开关</label>
          <div class="col-sm-10">
            <label class="i-switch bg-primary m-t-xs m-r">
              <input type="radio" name='switch' checked>
              <i></i>
            </label>
            <label class="i-switch bg-warning m-t-xs m-r">
              <input type="radio" name='switch'>
              <i></i>
            </label>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">开关大小</label>
          <div class="col-sm-10">
              中等的
            <label class="i-switch i-switch-md bg-info m-t-xs m-r">
              <input type="checkbox" checked>
              <i></i> 
            </label> 
              大的
            <label class="i-switch i-switch-lg bg-dark m-t-xs m-r">
              <input type="checkbox" >
              <i></i>
            </label>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">下拉框</label>
          <div class="col-sm-10">
            <select name="account" class="form-control m-b">
              <option>选项 1</option>
              <option>选项 2</option>
              <option>选项 3</option>
              <option>选项 4</option>
            </select>
            <div class="col-lg-4 m-l-n">
              <select multiple class="form-control">
                <option>选项 1</option>
                <option>选项 2</option>
                <option>选项 3</option>
                <option>选项 4</option>
              </select>
            </div>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group has-success">
          <label class="col-sm-2 control-label">文本框情景：成功</label>
          <div class="col-sm-10">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group has-warning">
          <label class="col-sm-2 control-label">文本框情景：警告</label>
          <div class="col-sm-10">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group has-error">
          <label class="col-sm-2 control-label">文本框情景：错误</label>
          <div class="col-sm-10">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">文本框大小</label>
          <div class="col-sm-10">
            <input class="form-control input-lg m-b" type="text" placeholder="大的 .input-lg">
            <input class="form-control m-b" type="text" placeholder="默认大小">
            <input class="form-control input-sm" type="text" placeholder="小的 .input-sm">
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">列尺寸</label>
          <div class="col-sm-10">
            <div class="row">
              <div class="col-md-2">
                <input type="text" class="form-control" placeholder=".col-md-2">
              </div>
              <div class="col-md-3">
                <input type="text" class="form-control" placeholder=".col-md-3">
              </div>
              <div class="col-md-4">
                <input type="text" class="form-control" placeholder=".col-md-4">
              </div>
            </div>
              <span class="help-block m-b-none">这就是bootstrap的栅格系统</span>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">输入框前导/后置字符</label>
          <div class="col-sm-10">
            <div class="input-group m-b">
              <span class="input-group-addon">@</span>
              <input type="text" class="form-control" placeholder="Username">
            </div>
            <div class="input-group m-b">
              <input type="text" class="form-control">
              <span class="input-group-addon">.00</span>
            </div>
            <div class="input-group m-b">
              <span class="input-group-addon">￥</span>
              <input type="text" class="form-control">
              <span class="input-group-addon">.00</span>
            </div>
            <div class="input-group m-b">
              <span class="input-group-addon">
                <input type="checkbox">
              </span>
              <input type="text" class="form-control">
            </div>
            <div class="input-group">
              <span class="input-group-addon">
                <input type="radio">
              </span>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">输入框前导/后置按钮</label>
          <div class="col-sm-10">
            <div class="input-group m-b">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">浏览</button>
              </span>
              <input type="text" class="form-control">
            </div>
            <div class="input-group">
              <input type="text" class="form-control">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
              </span>
            </div>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">输入框前导/后置下拉框</label>
          <div class="col-sm-10">
            <div class="input-group m-b">
              <div class="input-group-btn dropdown" dropdown>
                <button type="button" class="btn btn-default" dropdown-toggle>操作 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href>吃饭</a></li>
                  <li><a href>睡觉</a></li>
                  <li><a href>打代码</a></li>
                  <li class="divider"></li>
                  <li><a href>下班</a></li>
                </ul>
              </div><!-- /btn-group -->
              <input type="text" class="form-control">
            </div>
            <div class="input-group">
              <input type="text" class="form-control">
              <div class="input-group-btn dropdown" dropdown>
                <button type="button" class="btn btn-default" dropdown-toggle>操作 <span class="caret"></span></button>
                <ul class="dropdown-menu pull-right">
                  <li><a href>吃饭</a></li>
                  <li><a href>睡觉</a></li>
                  <li><a href>打代码</a></li>
                  <li class="divider"></li>
                  <li><a href>下班</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div>
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">输入框前导/后置<br />带分割符的<br />下拉框</label>
          <div class="col-sm-10">
            <div class="input-group m-b">
              <div class="input-group-btn dropdown" dropdown>
                <button type="button" class="btn btn-default" tabindex="-1">操作</button>
                <button type="button" class="btn btn-default" dropdown-toggle><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href>吃饭</a></li>
                    <li><a href>睡觉</a></li>
                    <li><a href>打代码</a></li>
                    <li class="divider"></li>
                    <li><a href>下班</a></li>
                </ul>
              </div><!-- /btn-group -->
              <input type="text" class="form-control">
            </div>
            <div class="input-group">
              <input type="text" class="form-control">
              <div class="input-group-btn dropdown" dropdown>
                <button type="button" class="btn btn-default" tabindex="-1">操作</button>
                <button type="button" class="btn btn-default" dropdown-toggle><span class="caret"></span></button>
                <ul class="dropdown-menu pull-right">
                    <li><a href>吃饭</a></li>
                    <li><a href>睡觉</a></li>
                    <li><a href>打代码</a></li>
                    <li class="divider"></li>
                    <li><a href>下班</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div>
          </div>
        </div>
        
        
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">单选按钮组</label>
          <div class="col-sm-10">
            <div class="btn-group m-r" ng-controller="ButtonsDemoCtrl" >
              <label class="btn btn-default" ng-model="radioModel" btn-radio="'Left'" uncheckable>左边</label>
              <label class="btn btn-default" ng-model="radioModel" btn-radio="'Middle'" uncheckable>中间</label>
              <label class="btn btn-default" ng-model="radioModel" btn-radio="'Right'" uncheckable>右边</label>
            </div>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">复选按钮组</label>
          <div class="col-sm-10">
            <div class="btn-group">
                <label class="btn btn-default" ng-model="checkModel.left" btn-checkbox>左边</label>
                <label class="btn btn-default" ng-model="checkModel.middle" btn-checkbox>中间</label>
                <label class="btn btn-default" ng-model="checkModel.right" btn-checkbox>右边</label>
            </div>
          </div>          
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">滑块</label>
          <div class="col-sm-10">
            <input id="slider" ui-jq="slider" ui-options="{min: 0,max: 20,step: 1,value: {{val}} }" 
                   class="slider slider-horizontal form-control" type="text"> {{val}}
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">垂直滑块</label>
          <div class="col-sm-10">
            <input ui-jq="slider" class="slider slider-vertical form-control" type="text" value="" data-slider-min="5" data-slider-max="20" data-slider-step="1" data-slider-value="11" data-slider-orientation="vertical">
            <input ui-jq="slider" class="slider slider-vertical form-control" type="text" value="" data-slider-min="5" data-slider-max="20" data-slider-step="1" data-slider-value="15" data-slider-orientation="vertical">
            <input ui-jq="slider" class="slider slider-vertical form-control" type="text" value="" data-slider-min="5" data-slider-max="20" data-slider-step="1" data-slider-value="12" data-slider-orientation="vertical">
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">区间滑块</label>
          <div class="col-sm-10">
            <input type="text" ui-jq="slider" class="slider form-control" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,750]" >
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">微调框</label>
          <div class="col-sm-10">
            <div class="m-b">
              <input ui-jq="TouchSpin" type="text" value="0" class="form-control" data-min='0' data-max="10" data-step="0.1" data-decimals="2" data-prefix="$">
            </div>
            <div class="m-b">
              <input ui-jq="TouchSpin" type="text" value="5" class="form-control" data-min='0' data-max="10" data-step="0.1" data-decimals="2" data-postfix="%">
            </div>
            <div>
              <input ui-jq="TouchSpin" type="text" value="10" class="form-control" data-min='0' data-max="20" data-verticalbuttons="true" data-verticalupclass="fa fa-caret-up"  data-verticaldownclass="fa fa-caret-down">
            </div>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">下拉搜索框</label>
          <div class="col-sm-10">
            <select ui-jq="chosen" class="w-full">
                <optgroup label="Alaskan/Hawaiian Time Zone">
                    <option value="AK">Alaska</option>
                    <option value="HI">Hawaii</option>
                </optgroup>
                <optgroup label="Pacific Time Zone">
                    <option value="CA">California</option>
                    <option value="NV">Nevada</option>
                    <option value="OR">Oregon</option>
                    <option value="WA">Washington</option>
                </optgroup>
                <optgroup label="Mountain Time Zone">
                    <option value="AZ">Arizona</option>
                    <option value="CO">Colorado</option>
                    <option value="ID">Idaho</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NM">New Mexico</option>
                    <option value="ND">North Dakota</option>
                    <option value="UT">Utah</option>
                    <option value="WY">Wyoming</option>
                </optgroup>
                <optgroup label="Central Time Zone">
                    <option value="AL">Alabama</option>
                    <option value="AR">Arkansas</option>
                    <option value="IL">Illinois</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="OK">Oklahoma</option>
                    <option value="SD">South Dakota</option>
                    <option value="TX">Texas</option>
                    <option value="TN">Tennessee</option>
                    <option value="WI">Wisconsin</option>
                </optgroup>
                <optgroup label="Eastern Time Zone">
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="IN">Indiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="OH">Ohio</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WV">West Virginia</option>
                </optgroup>
            </select>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">多选框</label>
          <div class="col-sm-10">
            <select ui-jq="chosen" multiple class="w-md">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">标签输入框</label>
          <div class="col-sm-10">
            <input ui-jq="tagsinput" ui-options="" class="form-control w-md" />
            <span class="help-block m-b-none">输入英文逗号进行分隔!</span>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">日期框</label>
          <div class="col-sm-10" ng-controller="DatepickerDemoCtrl">
            <div class="input-group w-md">
                <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="关闭" clear-text="清除" current-text="今天" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </div>
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">日期范围输入框</label>
          <div class="col-sm-10">
            <input ui-jq="daterangepicker" ui-options="{format: 'YYYY-MM-DD',startDate: '2013-01-01',endDate: '2013-12-31'}" class="form-control w-md" />
          </div>
        </div>

        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">文件上传控件</label>
          <div class="col-sm-10">
            <input type="file" ui-jq="filestyle" class="filestyle" data-icon="true"
                   data-buttonText="选择视频"
                   data-classButton="btn btn-default"
                   data-classInput="form-control inline v-middle input-s">
          </div>
        </div>
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <label class="col-sm-2 control-label">富文本框<br /><code tooltip="组件的名字叫 wysiwyg 也是很奇怪，哈哈">wysiwyg</code></label>
          <div class="col-sm-10">

            <!-- 富文本框的工具栏 -->
            <div class="btn-toolbar m-b-sm btn-editor" data-role="editor-toolbar" data-target="#editor">
              <div class="btn-group dropdown" dropdown>
                <a class="btn btn-default" dropdown-toggle tooltip="字体"><i class="fa fa-font"></i><b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li> 
                  <li><a href data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li>
                  <li><a href data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li></ul>
              </div>
              <div class="btn-group dropdown" dropdown>
                <a class="btn btn-default" dropdown-toggle data-toggle="dropdown" tooltip="字号"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href data-edit="fontSize 5" style="font-size:24px">大号</a></li>
                  <li><a href data-edit="fontSize 3" style="font-size:18px">中号</a></li>
                  <li><a href data-edit="fontSize 1" style="font-size:14px">小号</a></li>
                </ul>
              </div>
              <div class="btn-group">
                <a class="btn btn-default" data-edit="bold" tooltip="加粗 (Ctrl+B)"><i class="fa fa-bold"></i></a>
                <a class="btn btn-default" data-edit="italic" tooltip="斜体 (Ctrl+I)"><i class="fa fa-italic"></i></a>
                <a class="btn btn-default" data-edit="strikethrough" tooltip="删除线"><i class="fa fa-strikethrough"></i></a>
                <a class="btn btn-default" data-edit="underline" tooltip="下划线 (Ctrl+U)"><i class="fa fa-underline"></i></a>
              </div>
              <div class="btn-group">
                <a class="btn btn-default" data-edit="insertunorderedlist" tooltip="无序列表"><i class="fa fa-list-ul"></i></a>
                <a class="btn btn-default" data-edit="insertorderedlist" tooltip="有序列表"><i class="fa fa-list-ol"></i></a>
                <a class="btn btn-default" data-edit="outdent" tooltip="减少行缩进 (Shift+Tab)"><i class="fa fa-dedent"></i></a>
                <a class="btn btn-default" data-edit="indent" tooltip="增加行缩进 (Tab)"><i class="fa fa-indent"></i></a>
              </div>
              <div class="btn-group">
                <a class="btn btn-default" data-edit="justifyleft" tooltip="左对齐 (Ctrl+L)"><i class="fa fa-align-left"></i></a>
                <a class="btn btn-default" data-edit="justifycenter" tooltip="居中对齐 (Ctrl+E)"><i class="fa fa-align-center"></i></a>
                <a class="btn btn-default" data-edit="justifyright" tooltip="右对齐 (Ctrl+R)"><i class="fa fa-align-right"></i></a>
                <a class="btn btn-default" data-edit="justifyfull" tooltip="分散对齐 (Ctrl+J)"><i class="fa fa-align-justify"></i></a>
              </div>
              <div class="btn-group dropdown" dropdown>
                <a class="btn btn-default" dropdown-toggle tooltip="超链接"><i class="fa fa-link"></i></a>
                <div class="dropdown-menu">
                  <div class="input-group m-l-xs m-r-xs">
                    <input class="form-control input-sm" id="LinkInput" placeholder="URL" type="text" data-edit="createLink"/>
                    <div class="input-group-btn">
                      <button class="btn btn-sm btn-default" type="button">添加</button>
                    </div>
                  </div>
                </div>
                <a class="btn btn-default" data-edit="unlink" tooltip="移除超链接"><i class="fa fa-cut"></i></a>
              </div>
              
              <div class="btn-group">
                <a class="btn btn-default" tooltip="插入图片 (或直接拖曳到编辑框内)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
                <input type="file" data-edit="insertImage" style="position:absolute; opacity:0; width:41px; height:34px" />
              </div>
              <div class="btn-group">
                <a class="btn btn-default" data-edit="undo" tooltip="撤销 (Ctrl+Z)"><i class="fa fa-undo"></i></a>
                <a class="btn btn-default" data-edit="redo" tooltip="重做 (Ctrl+Y)"><i class="fa fa-repeat"></i></a>
              </div>
            </div>

            <!-- 富文本框 -->
            <div ui-jq="wysiwyg" class="form-control" style="overflow:scroll;height:200px;max-height:200px">
              很久很久以前&hellip;
            </div>
          </div>
        </div>
        
        <div class="line line-dashed b-b line-lg pull-in"></div>
        <div class="form-group">
          <div class="col-sm-4 col-sm-offset-2">
            <button type="submit" class="btn btn-default">取消</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
